<template>
    <view>
        <view class="smart-page-head">
            <view class="smart-page-head-title">video,视频播放</view>
        </view>
        <view class="smart-padding-wrap">
            <video
                id="myVideo"
                :danmu-list="danmuList"
                enable-danmu="true"
                danmu-btn="true"
                src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%A7%86%E9%A2%91%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B2-%E8%A7%86%E9%A2%91%E6%8E%A8%E8%8D%90%E7%BB%88%E7%AB%AF%E7%89%8820181126-lite.m4v"
            ></video>
            <view><input v-model="danmuValue" class="smart-input" type="text" placeholder="在此处输入弹幕内容" /></view>
            <view class="btn-v"><button @click="sendDanmu" class="page-body-button">发送弹幕</button></view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            danmuList: [
                {
                    text: '第 1s 出现的弹幕',
                    color: '#ff0000',
                    time: 1
                },
                {
                    text: '第 3s 出现的弹幕',
                    color: '#ff00ff',
                    time: 3
                }
            ],
            danmuValue: ''
        };
    },
    onReady: function(res) {
        this.videoContext = uni.createVideoContext('myVideo');

        setTimeout(() => {
            // this.showVideo = true;
        }, 350);

        // this.showVideo = true;
    },
    methods: {
        sendDanmu: function(e) {
            this.videoContext.sendDanmu({
                text: this.danmuValue,
                color: 'red'
            });
            this.danmuValue = '';
        }
    }
};
</script>

<style>
video {
    width: 100%;
}
.btn-v {
    margin: 15rpx;
}
</style>